<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米帐号 - 登录</title>
        <style type="text/css">
            body,html {
                padding: 0px;
                margin: 0px;
                height: 100%;
                background-color: #ffffff;
            }
            a,a:hover {
                text-decoration: none;
                color: inherit;
            }
            /* 头部样式 */
            .head-wrapper {
                width: 1130px;
                margin: 0 auto;
            }
            .head-wrapper .head {
                display: block;
                width: 200px;
                height: 98px;
                background-image: url("https://account.xiaomi.com/static/res/7f6f2f5/account-static/respassport/acc-2014/img/mistore_logo.png");
                background-repeat: no-repeat;
            }
            /* 主体部分样式 */
            .bg {
                width: 100%;
                height: 588px;
                background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12c02030ee73caa35a19be59c5b1ec78.jpg");
                background-position: top center;
                background-repeat: no-repeat;
                overflow: hidden;
                cursor: pointer;
            }
            .bg .form-wrapper {
                width: 1130px;
                margin: 32px auto 0;
                overflow: hidden;
            }
            .bg .form-wrapper .form {
                background-color: #fff;
                width: 410px;
                height: 556px;
                float: right;
                text-align: center;
                cursor: auto;
            }
                    /* 表单部分样式 */
            .bg .form-wrapper .form .nav-tab {
                width: 100%;
                padding:27px 0 24px ;
                color: #666;
                text-align: center;
            }
            .bg .form-wrapper .form .nav-tab .nav-tab-link {
                font-size: 24px;
                cursor: pointer;
            }
            .bg .form-wrapper .form .nav-tab .link-hover {
                color: #f56600;
            }
            .bg .form-wrapper .form .nav-tab [class=nav-tab-link]:hover {
                color: #f56600;
            }
            .bg .form-wrapper .form .nav-tab .line {
                width: 1px;
                height: 24px;
                border:1px solid #e0e0e0 ;
                margin: 0 35px 0 42px;
            }
            .bg .form-wrapper .form .input-inform {
                height: 50px;
                width: 348px;
                margin: 0 auto 14px;
                padding: 13px 16px 13px 14px;
                border:1px solid #e0e0e0;
                box-sizing: border-box;
                outline: none;
            }
            .bg .form-wrapper .form  .first {
                margin-top: 10px;
            }
            .bg .form-wrapper .form .btn {
                width: 348px;
                height:50px;
                margin: 10px auto 9px;
                background-color: #ff6700;
                color: #ffffff;
                font-size: 14px;
                cursor: pointer;
                border: none;
                outline: none;
            }
            .bg .form-wrapper .form .register {
                width: 348px;
                margin: 0 auto;
                font-size: 14px;
                overflow: hidden;
            }
            .bg .form-wrapper .form .register .item {
                float: right;
                line-height: normal;
                cursor: pointer;
                text-align: center;
                color: #999;
            }
            .bg .form-wrapper .form .register .item-hover {
                color: #ff6700;
                float: left;
            }
            .bg .form-wrapper .form .register .item:hover {
                color: #ff6700;
            }
            .bg .form-wrapper .form .bottom {
                width: 348px;
                margin: 123px auto 0;
                font-size: 14px;
                color: #757575;
                overflow: hidden;
            }
            .bg .form-wrapper .form .bottom fieldset {
                padding-top:10px ;
                border: 0;
                border-top: 1px solid #e0e0e0;
                color:#bbb ;
            }
            .bg .form-wrapper .form .bottom .icon {
                text-align: center;
            }
            .bg .form-wrapper .form .bottom .icon .other-login {
                display: inline-block;
                margin: 0 17px;
                width: 30px;
                height: 30px;
                cursor: pointer;
                border-radius: 50%;
            }
            .bg .form-wrapper .form .bottom .icon .other-login .common{
                background-image: url("https://account.xiaomi.com/static/res/166d6dc/account-static/respassport/acc-2014/img/icons_type.png");
                width: 18px;
                height: 18px;
                margin:4px auto 0 ;
                vertical-align: middle;
                display: block;
            }
            .bg .form-wrapper .form .bottom .icon .other-login .QQ {
                background-position: -19px 0;
            }
            .bg .form-wrapper .form .bottom .icon .other-login .weibo {
                background-position: -38px 0;
            }
            .bg .form-wrapper .form .bottom .icon .other-login .zhi {
                background-position: -57px 0;
                width: 25px;
            }
            .bg .form-wrapper .form .bottom .icon .other-login .weixin {
                background-position: -83px 0;
                width: 24px;
            }
        </style>
    </head>
    <body>
        <!-- 顶部logo部分 -->
        <div class="head-wrapper">
            <a class="head"></a>
        </div>
        <!-- 主体部分 -->
        <div class="bg">
            <div class="form-wrapper">
                <!-- 表单部分 -->
                <div class="form">
                    <div class="nav-tab">
                        <span class="nav-tab-link link-hover">帐号登录</span>
                        <span class="line"></span>
                        <span class="nav-tab-link">扫码登录</span>
                    </div>
                    <input class="input-inform first" placeholder="邮箱/手机号码/小米ID" type="text" autocomplete="off">
                    <input class="input-inform" placeholder="密码" type="password" autocomplete="off">
                    <input class="btn" type="button" value="登陆">
                    <div class="register">
                        <span class="item item-hover" style="color:#ff6700;">手机短信登录/注册</span>
                        <a class="item" href="https://account.xiaomi.com/pass/forgetPassword?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%26sign%3DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">忘记密码？</a>
                        <span style="float: right;color: #999999;margin: 0 2px;">|</span>
                        <a class="item" href="https://account.xiaomi.com/pass/register?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%26sign%3DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">立即注册</a>
                    </div>
                    <div class="bottom">
                        <fieldset><legend>其他方式登录</legend></fieldset>
                        <div class="icon">
                            <a class="other-login " style="background-color: #0288d1">
                                <i class="common QQ"></i>
                            </a>
                            <a class="other-login" style="background-color: #d32f2f">
                                <i class="common weibo"></i>
                            </a>
                            <a class="other-login" style="background-color: #0ae">
                                <i class="common zhi"></i>
                            </a>
                            <a class="other-login" style="background-color: #00d20d">
                                <i class="common weixin"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>